<template>
  <div>
    <el-container>
      <el-header>
        <el-button
          icon="el-icon-s-grid"
          @click="flag = !flag"
          >主要按钮</el-button
        >

        <el-button icon="el-icon-s-grid" @click="screen">全屏</el-button>
        <h1>后台管理系统</h1>
      </el-header>
      <el-container>
        <el-aside>
          <el-menu
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            router
            :collapse="flag"
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>图书管理</span>
              </template>
            </el-submenu>
            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">后台管理</span>
            </el-menu-item>
            <el-menu-item index="/table">
              <i class="el-icon-document"></i>
              <span slot="title">基础表格</span>
            </el-menu-item>
            <el-menu-item index="/tab">
              <i class="el-icon-setting"></i>
              <span slot="title">tab选项卡</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <el-tag
            v-for="(tag, index) in tags"
            :key="tag.name"
            closable
            :type="tag.type"
            @click="$router.push({ path: tag.path })"
            @close="closeTag(index)"
          >
            {{ tag.name }}
          </el-tag>

          <el-dropdown @command="close">
            <span class="el-dropdown-link">
              标签选择<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a">关闭所有</el-dropdown-item>
              <el-dropdown-item command="b">关闭其他</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import screenfull from "screenfull";
export default {
  data() {
    return {
      flag: false,
      // 默认不 全屏
      isFullscreen: false,
      tags: [
        {
          path: "/table",
          name: "表格",
        },
        {
          path: "/tab",
          name: "tab选项卡",
        },
      ],
    };
  },
  methods: {
    screen() {
      screenfull.toggle();
    },
    closeTag(index) {
      this.tags.splice(index, 1);
    },
    close(val) {
      console.log(val);
      if (val == "a") {
        this.tags = [];
        this, $router.push({ path: "/home" });
      } else if (val == "b") {
        this.tags = this.tags.filter((item) => {
          if (item.path == this.$route.path) {
            return item;
          }
        });
      }
    },
  },
};
</script>

<style lang="scss">
.el-header {
  background: #ccc;
}
</style>
